<template>
	<view class="kill_record">
		<Navbar>记录</Navbar>
		<scroll-view scroll-y class="scroll_view" @scrolltolower="loadmore">
			<view class="header">
				<view class="title">近30期杀手追讨记录</view>
				<view class="cell">
					<view class="item" v-for="item in history">
						<view class="name">{{item.name}}</view>
						<view class="info">
							<!-- <image src="@/static/images/kill/3.png"></image> -->
							<image :src="`${baseImageUrl}/kill/3.png`"></image>
							<text class="number">{{item.number}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="sub_title">参与记录</view>
				<view class="view_box">
					<view class="item">
						<text class="key">共投入</text>
						<view>
							<image :src="field_url"></image>
							<text>{{invest}}</text>
						</view>
					</view>
					<view class="item">
						<text class="key">共获得</text>
						<view>
							<image :src="field_url"></image>
							<text>{{profit}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list_title">
				<view class="time">时间</view>
				<view>投入</view>
				<view>获得</view>
			</view>
			<view class="list" v-if="list.length">
				<view class="item" v-for="item in list">
					<view class="time">{{item.created_at}}</view>
					<view>{{item.invest}}</view>
					<view>{{item.profit}}</view>
				</view>
				<u-loadmore :status="loadmore_status" :color="$store.state.loadmoreColor"
					:lineColor="$store.state.loadmoreColor" line @loadmore="loadmore" />
			</view>
			<view class="no_deta" v-else>
				<image :src="`${baseImageUrl}/kill/no.png`"></image>
				<view>暂无记录</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		baseImageUrl
	} from "@/utils/config.js";
	import {
		pursueList
	} from '@/request/api.js';
	export default {
		data() {
			return {
				type: null,

				history: [],

				invest: "",
				profit: "",
				field_url: "",
				list: []
			}
		},
		onLoad(options) {
			let type = this.type = options.type;
			const obj = {
				silver: `${baseImageUrl}/common/gy.png`,
				foodstuff: `${baseImageUrl}/common/hot_cover1.png`,
				cloth: `${baseImageUrl}/common/hot_cover2.png`,
				titledeed: `${baseImageUrl}/common/hot_cover3.png`,
				music: `${baseImageUrl}/common/hot_cover4.png`,
				escort: `${baseImageUrl}/common/hot_cover5.png`,
			};
			this.field_url = obj[type];
		},
		onShow() {
			this.getList();
		},
		onHide() {
			this.list = [];
			this.page = 1;
		},
		methods: {
			async getList() {
				let res = await pursueList({
					field: this.type,
					page: this.page,
					limit: this.limit
				});
				this.history = res.history;

				this.invest = res.invest;
				this.profit = res.profit;
				let list = res.list;

				this.last_page = list.last_page;
				this.list = this.page == 1 ? list.list : [...this.list, ...list.list];
				this.loadmore_status = this.last_page == this.page ? 'nomore' : 'loadmore';
			},
			loadmore() {
				if (this.page < this.last_page) {
					this.page++;
					this.getList();
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.kill_record {
		height: 100vh;
		background-color: #29170D;

		.scroll_view {
			height: calc(100vh - #{$navbarHeight});
			padding: 30rpx;
			box-sizing: border-box;

			.header {
				width: 100%;
				height: 390rpx;
				padding: 36rpx 30rpx;
				box-sizing: border-box;
				// background: url(@/static/images/kill/header.png) no-repeat;
				background: url(#{$baseImageUrl}/kill/header.png) no-repeat;
				background-size: 100% 100%;

				.title {
					line-height: 42rpx;
					text-align: center;
					color: #494338;
					font-size: 42rpx;
					font-weight: 400;
					font-family: LiSu;
				}

				.cell {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.item {
						width: 25%;
						margin-top: 40rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.name {
							width: 100rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							color: #000000;
							font-size: 24rpx;
							font-weight: 400;
							font-family: SimSun;
							margin-bottom: 12rpx;
							// background: url(@/static/images/kill/name2.png) no-repeat;
							background: url(#{$baseImageUrl}/kill/name2.png) no-repeat;
							background-size: 100% 100%;
						}

						.info {
							display: flex;
							align-items: center;

							image {
								width: 50rpx;
								height: 50rpx;
							}

							text {
								color: #494338;
								font-size: 44rpx;
								font-weight: 400;
								font-family: SimSun;
								padding-left: 6rpx;
								box-sizing: border-box;
							}
						}
					}
				}
			}

			.content {
				height: 252rpx;
				padding: 62rpx 0 82rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.sub_title {
					color: #FFFFFF;
					font-size: 42rpx;
					font-weight: 400;
					font-family: LiSu;
				}

				.view_box {
					display: flex;
					justify-content: space-between;

					.item {
						width: 50%;
						display: flex;

						.key {
							color: #FFFFFF;
							font-size: 28rpx;
							font-weight: 400;
							font-family: SimSun;
						}

						view {
							display: flex;
							align-items: center;

							image {
								width: 30rpx;
								height: 30rpx;
								margin: 0 10rpx 0 14rpx;
							}

							text {
								color: #FFFFFF;
								font-size: 30rpx;
								font-weight: 400;
								font-family: SimSun;
							}
						}
					}
				}
			}

			.list_title {
				height: 28rpx;
				line-height: 28rpx;
				display: flex;
				justify-content: space-between;

				view {
					flex: 1;
					text-align: center;
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
				}

				.time {
					flex: 3;
					text-align: left;
					box-sizing: border-box;
					padding-left: 26rpx;
				}
			}

			.list {
				padding-top: 32rpx;

				.item {
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					margin-bottom: 10rpx;
					// background: url(@/static/images/kill/item.png) no-repeat;
					background: url(#{$baseImageUrl}/kill/item.png) no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: space-between;

					view {
						flex: 1;
						text-align: center;
						color: #494338;
						font-size: 26rpx;
						font-weight: 400;
						font-family: SimSun;
					}

					.time {
						flex: 3;
						text-align: left;
						box-sizing: border-box;
						padding-left: 26rpx;
					}
				}
			}

			.no_deta {
				height: calc(100vh - #{$navbarHeight} - 60rpx - 390rpx - 252rpx - 28rpx);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 250rpx;
					height: 250rpx;
				}

				view {
					color: #FFFFFF;
					font-size: 28rpx;
					font-weight: 400;
					font-family: SimSun;
					margin-top: 34rpx;
				}
			}
		}
	}
</style>